<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>姜杭轩-前端工程师</title>
    <!--<link rel="stylesheet" type="text/css" href="css/iconfont/iconfont.css">-->
    <!--<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0 ,maximum-scale=1, minimum-scale=1,user-scalable=no">
    <link rel="shortcut icon" href="http://onfg1fey2.bkt.clouddn.com/%E5%B1%B1%E8%84%89.png" type="image/x-icon" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_dfhrv20vcimdvx6r.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <header>
        <div class="top">
            <video autoplay="autoplay" loop="loop">  
                <source  src="http://onfg1fey2.bkt.clouddn.com/vision.mp4" type="video/mp4" > 
                </video>
            <div class="top-ct">
                 
                <ul class="top-name">
                    <li><h1 class="orange" >姜杭轩</h1></li>
                    <li><h2>前端工程师</h2></li>
                    <!--<li><a href="javascript:void(0)" class="goto"><h6>SEE WORKS</h6></a></li>
                    <li><a href="javascript:void(0)" class="goto"><i class="iconfont icon-right"></i></a></li>-->
                </ul>
            </div>
        </div>

    </header>
    <main>
        <div class="detail-head center">
            <h1>Recently</h1>
            <h1 class="green">Works</h1>
        </div>
        <div class="works center">
            <div class="projects">
                <div class="img">
                    <a href="javascript:void(0)"><img src="" alt=""></a>
                </div>
                <div class="item">
                    <!--<div class="worklist">-->
                        <!--<a class="bg1" href="https://github.com/JaeJiang/vue-project" target="_blank"><img src="http://i1.piimg.com/567571/133e6c6bf6d3ccaf.png" alt="">-->
                            <!--<h2>简历制作工具</h2>-->
                            <!--</a>-->
                    <!--</div>-->
                    <!--<div class="work">-->
                        <!--<h2>制作简历工具项目</h2>-->
                        <!--<h4>技术使用:Vue.js、vue-cli、Vuex、LeanCloud</h4>-->
                        <!--<p>功能可以实现:添加简历内容，包括个人信息、工作经历、学习经历、获奖情况、项目经历和联系方式-->
                            <!--。更新简历内容,选择简历,模板预览简历,发布简历.-->
                        <!--</p>-->
                    <!--</div>-->
                </div>
            </div>
            <div class="demos center">
                <!--<div class="detail-head">-->
                    <!--<h2 class="orange">Demo</h2>-->
                <!--</div>-->
                <div class="worklist">
                    <a class="bg1" href="http://jianghangxuan.coding.me/music/vue-music/page" target="_blank"><img src="http://p1.bqimg.com/567571/ff812a529ac78b19.png" alt="">
                        <h2>Vue音乐播放器</h2>
                        <p>可以进行歌曲的暂停与播放，对歌曲的播放进度进行调节，并对歌词进行同步。播放上一首或者下一首时，获取的都是随机歌曲。可以进行音量的控制，满足一个基本的音乐播放器的功能。</p>
                    </a>
                    <a class="bg2" href="http://jianghangxuan.coding.me/todo/todos/page" target="_blank"><img src="http://p1.bpimg.com/567571/215efd92b4d0ce50.png" alt="">
                        <h2>在线日程表</h2>
                        <p>
                            <span>1.用户可以新建一个待办事项 </span>
                        <span>2.用户可以删除一个待办事项</span>
                        <span>3.用户可以将一个待办事项标记为已完成</span>
                        <span>4.用户刷新页面之后，待办事项还在。</span>
                        </p>
                    </a>
                    <a class="bg3" href="https://jaejiang.github.io/resume/%E4%BB%8A%E6%97%A5%E5%A4%B4%E6%9D%A1/" target="_blank"><img src="http://p1.bpimg.com/567571/caefbe99b2433f87.png" alt="">
                        <h2>今日头条</h2>
                        <p>今日头条的首页仿站，用flex属性重新构造布局，得到更好的用户体验。</p>
                    </a>
                    <a class="bg4" href="https://jaejiang.github.io/resume/waterfall/waterfall" target="_blank"><img src="http://i1.piimg.com/567571/0c033c31a4a7f76a.png" alt="">
                        <h2>新闻简页</h2>
                        <p>类似知乎日报的首页，通过AJAX拿到新闻数据，再通过瀑布流的方式展现出来。</p>
                    </a>
                </div>
                <div class="btn">
                    <button class="btn2 bg-orange"><a href="https://github.com/JaeJiang/resume" target="_blank"><h3>源码以及更多Demo</h3></a></button>
                </div>
            </div>
        </div>

        <div class="center">
            <div class="detail-head">
                <h2 class="green">技能</h2>
            </div>
            <!--//放蜘蛛图-->
            <div class="skill">
                <img src="http://p1.bpimg.com/567571/11512cac2656cf4d.png" alt="">
            </div>
        </div>
    </main>
    <footer>
        <div class="bottom center">
            <div class="detail">
                <div class="detail-head">
                    <h1>关于</h1>
                    <h1 class="orange">我</h1>
                </div>
                <div class="introduce">
                    <div class="pic3">
                        <img src="http://i1.piimg.com/567571/3770516a758f6bfd.png" alt="">
                    </div>
                    <div class="myself">
                        <h5>1.性格开朗，有上进心，做事踏实，喜欢运动，健身，音乐，爱编程，爱前端，喜欢编写小插件，研究新知识.</h5>
                        <h5>2. <span>Google</span>重度患者，希望加入一个热情洋溢的团队，提高自己的能力和技术，使自己成长的同时，能更好的为这个团队服务。</h5>
                        <h5>3.在工作和项目的积累中，渐渐了解<span>PhotoShop</span>的使用，熟练掌握切图技能，根据psd稿按要求按质量的完成html切图，解决对大部分主流浏览器的兼容问题。</h5>
                        <h5>4.熟练掌握<span>JavaScript</span>，运用<span>jQuery</span>库，了解<span>AJAX、JSONP</span>，能与后端程序员配合完成动态页面开发。会自己编写小插件，熟练CSS属性，对盒模型，定位，浮动等理解深刻并会运用。</h5>
                        <h5>5.了解<span>CSS 3</span>常用属性，如动画，阴影，过渡,2D及3D转换等等，可以完成各种特效，熟悉<span>HTML 5</span>的相关新特性，了解响应式布局及媒体查询，并可用来制作响应式页面，对html的各类标签及css属性的运用很熟练。</h5>
                        <h5>6.了解<span>ES6</span>语法，了解<span>Node.js</span>，熟悉并会运用<span>Vue.js</span>的基础功能。</h5>
                        <h5>7.能够使用<span>npm、webpack、gulp</span>等前端工程化工具。会用<span>Git</span>进行版本管理。</h5>
                        <h5>9.我是一个对工作充满热情，对挑战充满激情的90后，有合适的职位就快来联系我吧，期待与你共事!</h5>
                        

                    </div>
                </div>
            </div>
            <!--<div class="final-pic"></div>-->
            <div class="contact">
                <ul class="contact-ct">
                    <li><a href="https://github.com/JaeJiang" target="_blank"><i class="iconfont icon-github"></i>github</a></li>
                    <li><a href="http://www.jianshu.com/u/3ecbe81ebc23" target="_blank"><i class="iconfont icon-jianshu"></i>简书blog</a></li>
                    <li><a href="http://p1.bqimg.com/567571/b41428d381a634aa.jpg" target="_blank"><i class="iconfont icon-weichat"></i>微信</a></li>
                    <li><a href="tel:18817818001"><i class="iconfont icon-phone"></i>18817818001</a></li>
                    <li><a href="mailto:jianghangxuan@foxmail.com?subject=Job Opportunity" target="_blank" style="margin-left: 40px"><i class="iconfont icon-youxiang"></i>Josh@joshgo.top</a></li>

                </ul>
                <div class="btn">

                    <!--<button class="btn1 bg-orange"><a href=""><h3>CONTACT NOW</h3></a></button>-->
                    <button class="btn1 bg-green"><a href="https://jaejiang.github.io/resume/resume-pdf/%E5%A7%9C%E6%9D%AD%E8%BD%A9-%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91-2017.pdf" target="_blank"><h3>简历PDF版<i class="iconfont icon-download"></i></h3></a></button>
                </div>
            </div>
        </div>
    </footer>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>

        var $goto = $('.goto');
        var $topName = $('.top-name');
        // var scrollY = $(window.scrollY);

        $(window).on('scroll',function(e){
            var scrollTop = $('body').scrollTop();
            console.log(scrollTop);
            if(scrollTop < 350){
                $topName.show();
            }else{
                $topName.hide();
            }
        })
        // $goto.on('click',function(){
        //     $(window).scrollTop(774);
        // })

        $('.detail').on('mouseenter', function () {
            $(this).find('.pic3').css(
                "left","0"
            )
        })
        $('body').on('mouseenter', function () {
            $(this).find('.top .top-name .goto').css(
                    "left","0"
            )
        })

        var docH=(document.body.clientHeight||document.documentElement.clientHeight)-20;  
        var docW=document.body.clientWidth||document.documentElement.clientWidth;  
         
//vs code git测试

    </script>
</body>
</html>
